<template>
  <view class="page-container">
    <GlobalTopBar ref="topBarRef"> </GlobalTopBar>
    <!-- 顶部蓝色 -->
    <view class="topblue">
      <image :src="`${store.imgDomain}my_top.png`" mode="scaleToFill" />
    </view>
    <!-- 内容 -->
    <view class="page_content">
      <!-- 顶部信息 -->
      <view class="wbox">
        <!-- 头像 -->
        <view class="headbox">
          <image
            class="headimg"
            :src="store.userInfo?.headimg || `${store.imgDomain}my_hade.png`"
            mode="scaleToFill"
          />
        </view>
        <!-- 其他信息 -->
        <view class="infobox">
          <view class="infobox_item infobox_left">
            <text style="font-size: 30rpx">{{
              store.userInfo?.nick_name
            }}</text>
            <view
              class="t2"
              @click="
                uni.navigateTo({
                  url: '/pages/my/myaddress',
                })
              "
              ><uni-icons type="location" size="20" color="#386ACE"></uni-icons
              >服务地址<uni-icons
                style="transform: translateY(3rpx)"
                type="right"
                size="16"
              ></uni-icons
            ></view>
          </view>
          <view class="infobox_item infobox_right">
            <view class="rtoptext flex">
              <button
                id="contactBtn"
                class="flex_center"
                open-type="contact"
                bindcontact="onContact"
              >
                <text>客服</text>
              </button>
              <text class="line"></text>
              <text @click="store.to('/pages/my/settings')">设置</text></view
            >
          </view>
        </view>
      </view>
      <!-- 优惠券/钱包 -->
      <view class="modbox">
        <!-- 优惠券 -->
        <view class="yhq" @click="store.to('/pages/my/coupon')">
          <image
            class="yhqimg"
            :src="`${store.imgDomain}my_yhq.png`"
            mode="scaleToFill"
          />
          <text class="t1">优惠券</text
          ><text class="numberTxt">{{ couponQuantity }}</text>
        </view>
        <!-- 分割线 -->
        <!-- <view class="line"></view> -->
        <!-- 钱包 -->
        <view class="qb" @click="store.to('/pages/my/mywallet')">
          <image
            class="qbimg"
            :src="`${store.imgDomain}my_qb.png`"
            mode="scaleToFill"
          />
          <text class="t1">我的钱包</text
          ><text class="numberTxt">{{ store.userInfo.balance }}</text>
        </view>
      </view>
      <!-- vip -->
      <view class="hybox" @click="store.to('/pages/my/memberCenter')">
        <template v-if="!store.userInfo?.level_id">
          <text>您还没有开通过金匠VIP</text>
          <view class="hybtn"
            >开通会员<uni-icons
              style="transform: translateY(2rpx)"
              type="right"
              size="16"
              color="#315DD8"
            ></uni-icons
          ></view>
        </template>
        <template v-else>
          <view class="flex">
            <image
              class="hyicon"
              :src="`${store.imgDomain}my_hyicon.png`"
              mode="scaleToFill"
            />
            <text class="hyname">{{ store.userInfo?.level_title_text }}</text>
            <view class="line"></view>
            <view class="times">
              {{ formatTimestamp(store.userInfo?.level_end_at) }}到期
            </view>
          </view>
          <view class="hybtn"
            >立即续费<uni-icons
              style="transform: translateY(2rpx)"
              type="right"
              size="16"
              color="#315DD8"
            ></uni-icons
          ></view>
        </template>
      </view>

      <!-- 我的订单 -->
      <view class="page_item orderbox">
        <view class="o_tops">
          <text style="font-size: 30rpx; font-weight: 600">我的订单</text>
          <view class="flex"
            ><text
              class="ckqb"
              style="font-size: 24rpx"
              @click="store.to('/pages/my/myorder')"
              >查看全部</text
            >
            <uni-icons
              style="transform: translateY(3rpx)"
              type="right"
              size="16"
              color="#999"
            ></uni-icons
          ></view>
        </view>
        <!-- 状态 -->
        <view class="stabox">
          <view
            class="stabox_item"
            v-for="(item, index) in orderList"
            :key="index + 1"
            @click="store.to(item.path)"
          >
            <view class="numbox" v-if="item.num && item.text != '待评价'">{{
              item.num
            }}</view>
            <view
              class="numbox ac"
              v-else-if="item.num && item.text === '待评价'"
            ></view>
            <image
              :class="`img${index + 1}`"
              :src="item.url"
              mode="scaleToFill"
            />
            <text class="ltext">{{ item.text }}</text>
          </view>
        </view>
        <!-- 底部投诉 -->
        <view class="o_bottom flex">
          <view class="flex" @click="store.to('/pages/my/complaint')">
            <image
              class="limg"
              :src="`${store.imgDomain}my_order_5.png`"
              mode="scaleToFill"
            />
            <text>我的投诉</text>
          </view>
          <view class="flex">
            <image
              class="rimg"
              :src="`${store.imgDomain}my_order_6.png`"
              mode="scaleToFill"
            />
            <text>我的返修</text>
          </view>
        </view>
      </view>
      <!-- 入口 -->
      <view class="page_item rkbox">
        <view class="stabox ac">
          <template v-for="(item, index) in rkList" :key="index + 1">
            <view
              v-if="
                item.text != '企业认证' ||
                [1, 3, undefined].includes(
                  store.userInfo?.userEnterpriseCertificationInfo?.status,
                )
              "
              class="stabox_item ac"
              @click="liFun(item)"
            >
              <view class="imgbox">
                <image
                  :class="`img${index + 1}`"
                  :src="item.url"
                  mode="widthFix"
                />
              </view>
              <text class="ltext">{{ item.text }}</text>
            </view>
          </template>
        </view>
      </view>
      <!-- 文字 -->
      <view class="btext">
        <image :src="`${store.imgDomain}my_text.png`" mode="scaleToFill" />
      </view>
    </view>
    <!-- 底部菜单 -->
    <tabBar :current-index="3" :tab-list="store.tabList"></tabBar>
  </view>
</template>

<script setup>
import { computed, ref } from 'vue';
import { useCounterStore } from '@/store';
import tabBar from '@/components/tabBar.vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import request from '@/utils/request';
import { formatTimestamp } from '@/utils/validate';

const title = ref('我的');
const store = useCounterStore();
const couponQuantity = ref(0);
const workerData = ref({});
const orderList = computed(() => [
  {
    url: `${store.imgDomain}my_order_1.png`,
    num:
      store.userInfo.pending_order_num > 99
        ? '99+'
        : store.userInfo.pending_order_num,
    type: 1,
    text: '待付款',
    path: '/pages/my/myorder?user_status=2',
  },
  {
    url: `${store.imgDomain}my_order_2.png`,
    num:
      store.userInfo.to_be_served_order_num > 99
        ? '99+'
        : store.userInfo.to_be_served_order_num,
    type: 1,
    text: '待服务',
    path: '/pages/my/myorder?user_status=3',
  },
  {
    url: `${store.imgDomain}my_order_3.png`,
    num:
      store.userInfo.in_service_order_num > 99
        ? '99+'
        : store.userInfo.in_service_order_num,
    type: 1,
    text: '服务中',
    path: '/pages/my/myorder?user_status=4',
  },
  {
    url: `${store.imgDomain}my_order_4.png`,
    num:
      store.userInfo.to_be_evaluated_order_num > 99
        ? '99+'
        : store.userInfo.to_be_evaluated_order_num,
    type: 1,
    text: '待评价',
    path: '/pages/my/myorder?user_status=8',
  },
]);
const rkList = computed(() => [
  {
    url: `${store.imgDomain}my_rk_1.png`,
    text: '服务热线',
    path: '',
    type: 'phone',
  },

  {
    url: `${store.imgDomain}my_rk_3.png`,
    text: '我的地址',
    path: '/pages/my/myaddress',
  },
  {
    url: `${store.imgDomain}my_rk_4.png`,
    text: '电子发票',
    path: '/pages/my/invoice',
  },
  {
    url: `${store.imgDomain}my_rk_5.png`,
    text: '生日祝福',
    path: '/pages/my/birthdayWishes',
  },
  {
    url: `${store.imgDomain}my_rk_6.png`,
    text: '企业认证',
    path: '/pages/my/businessCooperation',
  },
  // {
  //   url: `${store.imgDomain}my_rk_7.png`,
  //   text: '师傅端',
  //   path:
  //     store.workerData?.status === 2
  //       ? '/pages/master/home/index'
  //       : '/pages/my/master',
  // },
]);

const liFun = (item) => {
  if (item?.type === 'phone') {
    handleCall();
  } else {
    if (!item.path) return;
    if (
      item.text === '生日祝福' &&
      formatTimestamp(times.value) != store.userInfo?.birth
    ) {
      uni.showToast({
        title: '今天还不是您的生日，等生日那天再来看看吧~',
        icon: 'none',
      });
      return;
    }
    store.to(item.path);
  }
};

// 获取用户有效优惠券数量
const getUserCouponCount = async () => {
  couponQuantity.value = await request('wxapp/user/getUserCouponCount');
};

// 服务热线
const handleCall = () => {
  uni.makePhoneCall({
    phoneNumber: store.customerServicePhone, // 要拨打的电话号码（字符串类型）
    success: () => {
      console.log('拨打电话请求已发出');
    },
  });
};
const times = ref(0);
onLoad(() => {
  request('wxapp/common/getTimeStamp').then((res) => {
    times.value = res;
  });
});

onShow(() => {
  if (!store.open_id || store.is_type != 1) return;
  getUserCouponCount();
  store.getUserByOpenId();
});
</script>

<style scoped lang="scss">
.topblue {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  image {
    width: 750rpx;
    height: 521rpx;
  }
}
.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.page_content {
  position: relative;
  z-index: 1;
  padding: 20rpx;

  .wbox {
    display: flex;
    align-items: center;
    .headbox {
      width: 71rpx;
      height: 71rpx;
      margin-right: 20rpx;
      .headimg {
        width: 71rpx;
        height: 71rpx;
        border-radius: 50%;
        border: 1rpx solid #1383ff;
      }
    }
    .infobox {
      flex: 1;
      display: flex;
      justify-content: space-between;
      font-size: 24rpx;
      .infobox_item {
        display: flex;
        flex-direction: column;
        .t2 {
          margin-top: 8rpx;
          display: flex;
          align-items: center;
        }
        .rtoptext {
          font-size: 28rpx;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          padding-right: 10rpx;
          text {
            flex-shrink: 0;
          }
          .line {
            display: block;
            width: 1rpx;
            height: 33rpx;
            background-color: #0948b6;
            margin: 0 20rpx;
          }
        }
      }
      .infobox_right {
        box-sizing: border-box;
        padding-bottom: 8rpx;
        justify-content: space-between;
      }
    }
  }
  .modbox {
    position: relative;
    margin: 38rpx 0 25rpx 0;
    display: flex;
    align-items: center;
    justify-content: center;

    .line {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 1rpx;
      height: 41rpx;
      background-color: #0948b6;
    }
    view {
      display: flex;
      align-items: center;
      justify-content: center;
      .yhqimg {
        width: 38rpx;
        height: 34rpx;
      }
      .qbimg {
        transform: translateY(-2rpx);
        width: 40rpx;
        height: 39rpx;
      }
      .t1 {
        margin: 0 15rpx;
      }
    }
    .yhq,
    .qb {
      flex: 1;
    }
  }
  .page_item {
    border-radius: 20rpx;
    border: 1rpx solid #437ef6;
    box-sizing: border-box;
    padding: 30rpx;
    background-color: #fff;
    .o_tops {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20rpx;
    }
    .stabox {
      display: flex;
      margin-bottom: 20rpx;
      &.ac {
        margin-bottom: 0;
      }
    }
    .stabox_item {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-top: 20rpx;
      &.ac {
        margin-top: 0;
      }
      width: 25%;
      height: 120rpx;
    }
    &.orderbox {
      .ltext {
        margin-top: 15rpx;
      }
      .img1 {
        width: 54rpx;
        height: 50rpx;
      }
      .img2 {
        width: 54rpx;
        height: 51rpx;
      }
      .img3 {
        width: 55rpx;
        height: 55rpx;
      }
      .img4 {
        width: 54rpx;
        height: 56rpx;
      }
      .numbox {
        position: absolute;
        top: 0;
        right: 30rpx;
        background-color: #ff0000;
        padding: 0 10rpx;
        line-height: 30rpx;
        font-size: 18rpx;
        color: #fff;
        border-radius: 15rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        &.ac {
          width: 20rpx;
          height: 20rpx;
          border-radius: 50%;
          padding: 0;
        }
      }
    }
    &.rkbox {
      margin-top: 26rpx;
      flex-wrap: wrap;
      .stabox {
        display: flex;
        flex-wrap: wrap;
      }
      .ltext {
        margin-top: 10rpx;
      }
      .imgbox {
        width: 60rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      image {
        width: 50rpx;
      }
    }
    .o_bottom {
      padding-top: 20rpx;
      position: relative;
      border-top: 1rpx solid #eee;
      color: $uni-text-color-grey;
      view {
        flex: 1;
        justify-content: center;
        .limg {
          width: 32rpx;
          height: 30rpx;
          margin-right: 10rpx;
        }
        .rimg {
          width: 30rpx;
          height: 30rpx;
          margin-right: 10rpx;
        }
      }
      &::after {
        content: ' ';
        position: absolute;
        top: 70%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 1rpx;
        height: 30rpx;
        background-color: #ccc;
      }
    }
  }
  .btext {
    position: relative;
    margin-top: 35rpx;
    display: flex;
    justify-content: center;
    &::after {
      content: ' ';
      width: 100rpx;
      height: 1rpx;
      position: absolute;
      top: 50%;
      left: 140rpx;
      transform: translateY(-50%);
      background-color: #73adff;
    }
    &::before {
      content: ' ';
      width: 100rpx;
      height: 1rpx;
      position: absolute;
      top: 50%;
      right: 140rpx;
      transform: translateY(-50%);
      background-color: #73adff;
    }
    image {
      position: relative;
      display: block;
      opacity: 0.6;
      width: 185rpx;
      height: 38rpx;
    }
  }
}
.hybox {
  border-radius: 15rpx;
  background: linear-gradient(to right, #2b54c6, #3789f8);
  color: #fff;
  box-sizing: border-box;
  padding: 0 35rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 25rpx;
}
.hybtn {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #315dd8;
  padding: 5rpx 5rpx 5rpx 20rpx;
  background-color: #cfe9ff;
  border-radius: 20rpx;
  line-height: 34rpx;
}
.hyicon {
  width: 33rpx;
  height: 30rpx;
  margin-right: 15rpx;
}
.hyname {
  font-size: 30rpx;
  color: #ffc66e;
}
.line {
  height: 26rpx;
  width: 1rpx;
  background-color: #fff;
  margin: 0 20rpx;
}
.times {
  color: #fff;
  font-size: 24rpx;
}
.ckqb {
  color: $uni-text-color-grey;
}
</style>
